import React from 'react';
import Api from 'Utils/api';
import { message, Pagination } from 'antd';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import { formatUtcTime, generateUUID } from 'Utils/index';
import EllipticalTitle from '../../EllipticalTitle';
import './index.scss';

class ComplainntPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      pageSize: BROWSER_MODE.isVertical(this.props.mode) ? 10 : 7,
      reportListNum: BROWSER_MODE.isVertical(this.props.mode) ? 8 : 5,
      currentPage: 1,
      dataCount: 0,
      data: [],
      reportList: [],
      reportNum: ''
    };
    this.IsVertical = BROWSER_MODE.isVertical(this.props.mode);
    this.handleReport = ::this.handleReport;
    this.initData = ::this.initData;
    this.onListPageChange = ::this.onListPageChange;
    this.showState = ::this.showState;
    this.getList = ::this.getList;
    this.reportList = ::this.reportList;
    this.initReportNum = ::this.initReportNum;
    this.tableList = ::this.tableList;
  }
  componentWillMount() {
    this.initData();
    this.getList();
    this.initReportNum();
  }
  initReportNum() {
    const api = new Api({
      method: 'GET',
      path: '/reports/total_count',
      success: (json) => {
        this.setState({
          reportNum: json.counts,
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  getList() {
    const api = new Api({
      method: 'GET',
      path: '/reports/list',
      success: (json) => {
        this.setState({
          reportList: json.slice(0, this.state.reportListNum),
        });
      }
    });
    api.run();
  }
  reportList() {
    const { reportList } = this.state;
    let text = '';
    reportList.forEach((k) => {
      text += `
      <p class="complaint-list-p">
                  <span>${formatUtcTime(k.create_time)}</span>
                  <span>${k.is_anonymity ? '***' : k.reporter}</span>
                  <span>发布了文字${k.report_type === 'video' ? '、视频' : ''}${k.report_type === 'audio' ? '、音频' : ''}举报</span>
                </p>
      `;
    });
    $('#reportList').html(text);
  }
  tableList() {
    const { data } = this.state;
    const nodeInfo = [];
    data.forEach((k) => {
      nodeInfo.push((
        <p onClick={this.handleDetail.bind(this, k)} className="complaint-body" key={generateUUID()}>
          <span>{k.title}</span>
          <span>{k.modify_time && formatUtcTime(k.modify_time)}</span>
          <span className={k.handle_state === 1 ? 'handle_state' : ''}>{this.showState(k.handle_state)}</span>
        </p>
      ));
    });
    return nodeInfo;
  }
  handleReport() {
    this.props.dispatch(routerActions.push('/interactive/complaint/report'));
  }
  showState(state) {
    if (state === 0) {
      return '未处理';
    } else if (state === 1) {
      return '处理中';
    }
    return '已处理';
  }
  initData() {
    const { currentPage, pageSize } = this.state;
    const query = {};
    query.limit = pageSize;
    query.offset = (currentPage - 1) * pageSize;
    const api = new Api({
      method: 'GET',
      path: '/reports/user',
      query: query,
      success: (res) => {
        this.setState({
          data: res.data_list,
          dataCount: res.total_count,
        });
      },
      error: () => { }
    });
    api.run();
  }
  onListPageChange(page) {
    this.setState({ currentPage: page }, () => this.initData());
  }
  handleDetail(record) {
    this.props.dispatch(routerActions.push(`/interactive/complaint/component_detail/${record.id}`));
  }
  render() {
    const { reportNum } = this.state;
    const isVertical = BROWSER_MODE.isVertical(this.props.mode);
    if (isVertical) {
      return (
        <div className="v-complaint-project-page">
          <EllipticalTitle
            text="最新动态"
            report={<span>
                已有<span>{reportNum}</span>人举报
              </span>}
          />
          <div className="complaint-rigth-top">
            <div id="reportList" className="complaint-list">
              {
                this.reportList()
              }
            </div>
          </div>
          <div className="complaint-info">
            <EllipticalTitle
              text="信息公开"
            />
            <div className="complaint-left">
              <div className="complaint-table">
                <p className="complaint-head">
                  <span>标题</span>
                  <span>办理时间</span>
                  <span>状态</span>
                </p>
                <div id="tableList">
                  {
                    this.tableList()
                  }
                </div>
                <div className="complaint-pagination">
                  <Pagination pageSize={this.state.pageSize} current={this.state.currentPage} onChange={this.onListPageChange.bind(this)} total={this.state.dataCount} />
                </div>
              </div>
            </div>
          </div>
          <EllipticalTitle
            text="我要举报"
          />
          <div className="complaint-rigth-bottom">
            <div className="complaint-icon" onClick={this.handleReport}>
              <img src="images/horizonImg/icon_report.png" alt="我要举报" />
              <div className="icon-text">我要举报</div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="complaint-project-page complaint-table-td">
        <div className="complaint-main-wrap">
          <div className="complaint-rigth">
            <EllipticalTitle
              text="最新动态"
              report={<span>
                已有<span>{reportNum}</span>人举报
              </span>}
            />
            <div className="complaint-rigth-top">
              <div id="reportList" className="complaint-list">
                {
                  this.reportList()
                }
              </div>
            </div>
            <EllipticalTitle
              text="我要举报"
            />
            <div className="complaint-rigth-bottom">
              <div className="complaint-icon" onClick={this.handleReport}>
                <img src="images/horizonImg/icon_report.png" alt="我要举报" />
                <div className="icon-text">我要举报</div>
              </div>
            </div>
          </div>
          <div className="complaint-containsLeft">
            <EllipticalTitle
              text="信息公开"
            />
            <div className="complaint-left">
              <div className="complaint-table">
                <p className="complaint-head">
                  <span>标题</span>
                  <span>办理时间</span>
                  <span>状态</span>
                </p>
                <div id="tableList">
                  {
                    this.tableList()
                  }
                </div>
                <div className="complaint-pagination">
                  <Pagination pageSize={this.state.pageSize} current={this.state.currentPage} onChange={this.onListPageChange.bind(this)} total={this.state.dataCount} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.userReducer,
    ...state.routing,
    ...state.webReducer,
  };
}
export default connect(mapStateToProps)(ComplainntPage);
